Right now the disabling button when email is in correct format is already working fine based on my code below.
Scenario I want to implement :
How do we address that in Angular ? is there a cleaner way or technique to do that ?
<div fxLayout="column">
<mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;">
<mat-label>Email</mat-label>
<input type="email" matInput autocomplete="emailAddress" matInput formControlName="emailAddress" />
<mat-error *ngIf="modelForm.get('emailAddress').hasError('email')">
Email is in invalid format.
</mat-error>
<mat-error *ngIf="modelForm.get('emailAddress').hasError('required')">
Email is required.
</mat-error>
</mat-form-field>
</div>
<form (click)="getStarted()">
<div style="text-align:right;margin-top: 19.0px;">
<button [disabled]="modelForm?.get('emailAddress').invalid" mat-flat-button color="primary"
class="v-btn-sml" id="get-started-button">
Get Started
</button>
</div>
</form>
ngOnInit(): void {
this.initFormGroup();
}
initFormGroup() {
this.modelForm = this.formBuilder.group({
id: [this.model.id || 0],
emailAddress:[this.model.emailAddress,[Validators.required, Validators.email]],
firstName: [this.model.firstName,Validators.required],
roleId: this.model.roleId,
lastName: [this.model.lastName,Validators.required],
phoneNumber: this.model.phoneNumber,
companyName: [this.model.companyName,Validators.required],
ssocredentials: this.model.ssocredentials || '',
accountId: this.accountId,
title: this.model.title,
isSso: this.model.isSso || '',
});
}
You can always include more functionality by binding [disabled] to a property or a function. Just be aware that you don't want to put time-consuming logic into the disabled check since angular will run it very often. Here is an example of what I am describing.
HTML:
<button [disabled]="isDisabled" mat-flat-button color="primary"
class="v-btn-sml" id="get-started-button">
Get Started
</button>
</div>
</form>
Typescript
get isDisabled(): boolean {
if (!this.modelForm.valid) {
return true;
}
const vals = this.modelForm.value;
return this.model.emailAddress == vals['emailAddress'];
}
You might want to try using a variable for letting the app know that the button is clicked. eg: submitted.
By default Get Started button is disabled -> submitted=false
If user input a valid email on type Get Started button will enable -> check if the form field is valid using formControls
If user click Get Started button , after clicking it will disable -> submitted=true
Button will only enable again after click if user change the input on the email field with a valid one -> repeast the second one, after you submit, do reset the form for this functionality.
You can achieve that by binding the disabled property to two indicators, if any of them are true, then the button will be disabled:
modelForm?.get('emailAddress').invalidisDisabled variable (should be true by default to disable), and will be changed on two events:false once the email field has been changed (ngModelChange)="isDisalbed = false"true once the button has been clicked (i.e. within the getStarted method).You can try something like the following:
<form [formGroup]="modelForm">
<div fxLayout="column">
<mat-form-field class="full-width" appearance="fill" style="margin-top: 20px">
<mat-label>Email</mat-label>
<input type="email" matInput autocomplete="emailAddress" matInput formControlName="emailAddress"
(ngModelChange)="isDisalbed = false" />
<mat-error *ngIf="modelForm.get('emailAddress').hasError('email')">
Email is in invalid format.
</mat-error>
<mat-error *ngIf="modelForm.get('emailAddress').hasError('required')">
Email is required.
</mat-error>
</mat-form-field>
</div>
<div style="text-align: right; margin-top: 19px">
<button [disabled]="modelForm?.get('emailAddress').invalid || isDisabled" mat-flat-button color="primary"
class="v-btn-sml" id="get-started-button" (click)="getStarted()">
Get Started
</button>
</div>
</form>
And within your component class:
isDisabled = true;
getStarted() {
this.isDisabled = true;
// your logic here
}